<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="layouts::header"></head>
<body>

<nav th:replace="layouts::navbar"></nav>
<div class="container">
     <h3>主面板</h3>
    <p th:text="${versionNumber}"></p>
 <div class="row">
     <div class="col-md-6">
     <h4>当前项目</h4>
        <table class="table table-bordered table-striped">
           <thead class="thead-dark">
           <tr>
              <th>项目名称</th>
              <th>项目状态</th>
           </tr>
           </thead>
        <tbody>
            <tr th:each="aProject : ${projects}">
                <td th:text="${aProject.name}"></td>
                <td th:text="${aProject.stage}"></td>
            </tr>
        </tbody>
    </table>
</div>
    <div class="col-md-4">
      <canvas id="myPieChart" height="50" width="50"></canvas>

        <script>
           let charData = "[[${projectStatusData}]]"

        </script>

    </div>
<div>
    <h4>当前学生</h4>
    <div class="row">
        <div class="col-md-6">
        <table class="table table-bordered table-striped">
        <thead class="thead-dark">
        <tr>
            <th>学生姓名</th>
            <th>微信号</th>
            <th>项目个数</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="aStudent : ${studentProjects}">
            <td th:text="${aStudent.name}"></td>
            <td th:text="${aStudent.wechatId}"></td>
            <td th:text="${aStudent.projectCount}"></td>
        </tr>
        </tbody>
    </table>
</div>
    </div>
    <div class="col-md-4">
        <canvas id="myPieChart" height="50" width="50"></canvas>
    </div>
</div>

<script type="text/javascript" th:src="@{css/js/myChart.js}"></script>
</body>

</html>
